<script setup>
import { ref, onMounted } from 'vue'
import ItemList from './components/ItemList.vue'
import ItemForm from './components/ItemForm.vue'

const items = ref([])
const isLoading = ref(true)
const error = ref(null)

// 初始化加载数据
onMounted(async () => {
  try {
    // 修改后（使用环境变量）
    const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:5000'
    const response = await fetch(`${API_URL}/api/crawler-items`);
    console.log('Response status:', response.status); // 打印响应状态码
    if (!response.ok) {
      const errorText = await response.text(); // 获取错误信息
      throw new Error(`请求失败，状态码: ${response.status}, 错误信息: ${errorText}`);
    }
    items.value = await response.json();
  } catch (err) {
    console.error('请求出错:', err); // 打印详细错误信息
    error.value = err.message;
  } finally {
    isLoading.value = false;
  }
});

// 处理新增商品
const handleAddItem = async (newItem) => {
  try {
    const response = await fetch('http://localhost:5000/api/items', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        ...newItem,
        id: Date.now() // 生成唯一ID
      })
    })
    
    if (response.ok) {
      items.value.push(await response.json())
    }
  } catch (error) {
    console.error('提交失败:', error)
  }
}
</script>

<template>
  <div class="container">
    <header>
      <div class="header-content">
        <div class="title-group">
          <h1>二手交易平台</h1>
        </div>
        <div class="search-box">
          <input type="text" placeholder="请输入要搜索的商品">
          <button>搜索</button>
        </div>
        <div class="publish-button-container">
          <router-link to="/publish" class="publish-button">发布商品</router-link>
        </div>
      </div>
    </header>

    <main>
      <div v-if="isLoading" class="loading">加载中...</div>
      <div v-else-if="error" class="error">{{ error }}</div>
      <template v-else>
        <ItemList :items="items" />
      </template>
    </main>
  </div>
    <router-view></router-view>
</template>

<style>
/* 新增加载状态样式 */
.loading, .error {
  text-align: center;
  padding: 2rem;
  font-size: 1.2rem;
}

.loading {
  color: #666;
}

.error {
  color: #e74c3c;
}

/* 保持原有样式不变... */
</style>

<style scoped>
.container {
  max-width: 1400px;
  padding: 1rem 2rem;
  padding-top: 150px; /* 新增顶部间距 */
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to right, #9966ff 0%, #66ccff 100%);
  z-index: 1000;
  margin-bottom: 2rem;
  padding: 1rem 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header-content {
  display: flex;
  align-items: center;  /* 垂直居中 */
  justify-content: space-between; 
  gap: 20px;  /* 元素间距 */
}

.title-group {
  flex: 0 1 auto;  /* 禁止标题组拉伸 */
}

.search-box {
  position: static;  /* 移除绝对定位 */
  transform: none;
  margin: 0;
}


.publish-button-container {
  flex: 0 0 auto;  /* 固定尺寸 */
}
  

.search-box input {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 400px;
  height:50px;
}

.search-box button {
  padding: 8px 20px;
  background-color: #FFD600;
  color: black;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  height:50px;
}

main {
  display: block; /* 移除网格布局 */
}

.item-list {
  width: 100%;
  padding-left: 0; /* 移除左侧内边距 */
  margin-left: 0;  /* 移除左侧外边距 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  padding: 10px;
}

h1 {
  font-weight: bold;
  font-size: 2.5rem;
  background: linear-gradient(135deg, #FF6B00 20%, #FFD700 80%);
  background-size: 200% 200%;
  animation: gradient 1.5s ease infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding: 0.5em 1em;
  border-radius: 8px;
  text-shadow: 0 0 10px rgba(0,0,0,0.25);
}

@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
  }
  
  .search-box {
    width: 100%;
  }
  
  .search-box input {
    width: 100%;
  }
  
  main {
    grid-template-columns: 1fr;
  }
  
  .item-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>

<style scoped>
/* 新增发布按钮样式 */
.publish-button-container {
  margin-bottom: 2rem;
  text-align: center;
}

.publish-button {
  display: inline-block;
  padding: 12px 24px;
  background-color: #FF6B6B;
  color: white;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.3s;
}

.publish-button:hover {
  background-color: #3aa876;
}
</style>

<style>
body {
  margin: 0;
  background: white;
}
</style>

